<script setup>
import { useListStore } from '../store/list'
import Drawer from './drawer.vue';
import { useDrawerStore } from '../store/drawer';
import { useDialogStore } from '../store/dialog';
import collection from '../api/collection';
import Dialog from './dialog.vue';
//获取修改藏品的数据
const dialogStore = useDialogStore()
//获取list展示的table数据
const listStore = useListStore()
const drawerStore = useDrawerStore()
async function getcollectionDetail(id){
    drawerStore.setDrawer()
    await collection.getCollectionDetail(id).then(res => {
        drawerStore.setContainer(res.data.data)
        console.log(drawerStore.container)
    })
}
async function editCollection(row){
    await collection.getCollectionEditCollectionById(row.id).then(res => {
        dialogStore.setContain(res.data.data)
        console.log(dialogStore.contain)
    })
    dialogStore.setDialog()
    dialogStore.setIsSubmit(false)
}
</script>

<template>
    <el-table v-loading="dialogStore.isSubmit" :data="listStore.tableData" max-height="500px" style="width: 100%; margin-top: 1rem;">
        <el-table-column prop="internalId" label="馆藏编号" width="180" align="center" header-align="center"/>
        <el-table-column prop="name" label="藏品名称" width="150" align="center" header-align="center"/>
        <el-table-column prop="alternateName" label="别称" width="120" align="center" header-align="center"/>
        <el-table-column prop="currentLocation" label="存放位置" width="180" align="center" header-align="center"/>
        <el-table-column prop="preservationStatus" label="保存状态" width="120" align="center" header-align="center"/>
        <el-table-column prop="status" label="当前状态" width="120" align="center" header-align="center"/>
        <el-table-column prop="acquisitionDate" label="入馆时间" width="180" align="center" header-align="center">
            <template #default="{ row }">
                {{ row.acquisitionDate }}
            </template></el-table-column>
        <el-table-column fixed="right" label="Operations" min-width="120" align="center" header-align="center">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="getcollectionDetail(row.id)">
                    详情
                </el-button>
                <el-button link type="primary" size="small" @click="editCollection(row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <Drawer v-if="drawerStore.drawer"/>
    <Dialog v-if="dialogStore.dialog"/>
</template>

<style scoped>
/* 表头文本居中 */
.el-table th>.cell {
    text-align: center !important;
}

/* 内容文本居中 */
.el-table td>.cell {
    text-align: center !important;
}

/* 如果操作列需要保持左对齐，可以单独重置 */
.el-table td:last-child .cell {
    text-align: left !important;
}
@media (max-width: 768px) {
  .el-table {
    min-width: 100vw !important;
    width: 100vw !important;
    font-size: 12px;
  }
  .el-table__body-wrapper {
    overflow-x: auto;
    width: 100vw !important;
  }
  .el-table th, .el-table td {
    padding: 6px 4px;
  }
  .el-table th>.cell, .el-table td>.cell {
    white-space: normal;
    word-break: break-all;
    padding: 0 2px;
  }
  .el-table-column--fixed-right, .el-table-column--fixed {
    min-width: 80px;
  }
}
</style>